<template>
  <div class="page-container order">
    <van-nav-bar
      title="我的订单"
      fixed
      placeholder
    />
    
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部">
        <order-list status="all" />
      </van-tab>
      <van-tab title="待支付">
        <order-list status="1" />
      </van-tab>
      <van-tab title="待服务">
        <order-list status="2" />
      </van-tab>
      <van-tab title="已完成">
        <order-list status="3" />
      </van-tab>
      <van-tab title="已取消">
        <order-list status="4" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import OrderList from './components/OrderList.vue'

const activeTab = ref(0)

// 订单状态选项
const orderStatus = [
  { text: '全部', value: '' },
  { text: '待支付', value: 0 },
  { text: '待服务', value: 1 },
  { text: '已完成', value: 2 },
  { text: '已取消', value: 3 }  // 添加已取消状态
]

// 订单状态对应的样式
const getStatusStyle = (status) => {
  const statusMap = {
    0: { color: '#ff976a', text: '待支付' },
    1: { color: '#07c160', text: '待服务' },
    2: { color: '#969799', text: '已完成' },
    3: { color: '#969799', text: '已取消' }  // 添加已取消状态样式
  }
  return statusMap[status] || { color: '#969799', text: '未知状态' }
}

// 订单操作按钮
const getOrderActions = (order) => {
  const actions = []
  
  // 只有非取消状态的订单才显示操作按钮
  if (order.status !== 3) {
    switch (order.status) {
      case 0: // 待支付
        actions.push(
          { text: '取消订单', type: 'danger' },
          { text: '去支付', type: 'primary' }
        )
        break
      case 1: // 待服务
        actions.push(
          { text: '取消订单', type: 'danger' },
          { text: '联系服务人员', type: 'primary' }
        )
        break
      case 2: // 已完成
        actions.push(
          { text: '评价', type: 'primary' }
        )
        break
    }
  }
  
  return actions
}
</script>

<style lang="scss" scoped>
.order {
  background: var(--background-color);
}

.order-item {
  margin: 12px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f5f5f5;

    .order-no {
      font-size: 14px;
      color: #666;
    }

    .order-status {
      font-size: 14px;
      font-weight: 500;
    }
  }

  .order-content {
    padding: 12px;
    cursor: pointer;
  }

  .order-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #f5f5f5;

    .van-button {
      height: 28px;
      padding: 0 12px;
    }
  }
}
</style> 